<template>
    <div class="my_input">
        <el-input class="my-ipt"
            :style="{ '--font': $i18n.locale === 'zh' ? 'IdeaFonts-DianHei-DEJ, IdeaFonts-DianHei' : 'PingFangSC-Regular, PingFang SC' }"
            :class="err_message ? 'isError' : ''" v-model.trim="message" :type="type1" :placeholder="value" :name="name"
            @[rule.trigger]="rules" :show-password="showPassword"></el-input>
        <div class="error" v-show="err_message">{{ err_message }}</div>
    </div>
</template>

<script>
export default {
    name: 'MyInput',
    data() {
        return {
            message: "",
            err_message: ""
        }
    },
    props: {
        type1: {
            type: String,
            default: 'text'
        },
        value: {
            type: String,
            default: ''
        },
        name: {
            type: String,
            default: ''
        },
        rule: {
            type: Object,
            default() {
                return {
                    trigger: 'blur'
                }
            }

        },
        error: {
            type: String,
            default: ''
        },
        showPassword: {
            type: Boolean,
            default: false
        },
        values: {
            type: String,
            default: ""
        }
    },

    methods: {
        rules() {
            let length = this.message.length
            let { min, max, reg, same } = this.rule
            let num_turn = 'open'
            let reg_turn = 'open'
            if (this.rule.required === true) { //判断为必填
                // 必传验证,若提示出错关闭字数验证与正则验证
                if (!length) {
                    this.err_message = this.rule.req_message;
                    num_turn = 'off';
                    reg_turn = 'off';

                } else num_turn = 'open'
                if (num_turn === 'open') {
                    if (min || max) {//判断长度
                        // 字数验证，若出错关闭正则验证
                        if (length > max || length < min) {
                            this.err_message = this.rule.num_message;
                            reg_turn = 'off';
                        } else this.err_message = ''
                    }

                }
                if (reg_turn === 'open') {
                    if (reg) { //判断是否匹配
                        // 正则验证
                        if (!reg.test(this.message)) this.err_message = this.rule.reg_message
                        else this.err_message = ''
                    } else if (same) {
                        if (this.message !== same) this.err_message = this.rule.reg_message
                        else this.err_message = ''
                    }
                }

            }
        }
    },
    watch: {
        message(newVal, oldVal) {
            this.$emit("message", newVal)
        },
        error(newVal, oldVal) {
            this.err_message = newVal
        },
        values(newVal, oldVal) {
            this.message = newVal
        }
    }
}
</script>


<style lang="less" scoped>
.error {
    font-size: 0.43rem;
    font-family: 'IdeaFonts-DianHei-CEJ', 'IdeaFonts-DianHei';
    font-weight: normal;
    color: #F64F4F;
    line-height: 0.64rem;
}


.my_input {
    .my-ipt {
        ime-mode: disabled;
        width: 100%;
        height: 1.6rem;
        backdrop-filter: blur(10px);
        border-radius: 0.21rem;

    }

    .isError :deep(.el-input__wrapper) {
        border: red 1px solid !important;
    }

    .my-ipt :deep(.el-input__wrapper) {
        padding: 0.37rem 0.43rem !important;
        position: relative;
        background: linear-gradient(315deg, rgba(250, 251, 255, 0.25) 0%, rgba(252, 248, 255, 0.25) 100%);
        box-shadow: none;
        border: none;
        border: 0.03rem solid #C5C5CA;
    }

    .my-ipt :deep(.el-input__suffix) {
        position: absolute;
        right: 1rem;
    }

    .my-ipt :deep(.el-input__inner::placeholder) {
        height: 0.85rem;
        font-size: 0.53rem;
        font-family: var(--font);
        font-weight: normal;
        color: #C5C5CA;
        line-height: 0.85rem;
    }
}
</style>